import React, { Component } from 'react'
import PubSub from 'pubsub-js'
import './Item.css'
export default class Item extends Component {
  state = {
    isEdit: false, // 用于控制编辑功能如何展示视图
    tN: '', // 记录用户输入的新的任务名的状态
  }
  handle = (id) => (e) => {
    // 将要修改的数据的id,传递给App组件
    // this.props.getTodoId(id)
    PubSub.publish('update', id)
  }
  delhandle = (id) => (e) => {
    // 将要修改的数据的id,传递给App组件
    this.props.getTodoIdDelete(id)
  }

  // 编辑按钮的事件处理函数
  editHandle = () => {
    // 修改isEdit的值
    this.setState({
      isEdit: !this.state.isEdit,
      tN: this.props.todo.todoName,
    })
  }

  // 修改任务名的事件处理函数
  updateTodo = (id) => (e) => {
    if (e.keyCode !== 13) return
    // 调用app组件中的函数,去修改app中的数据
    // id, tN
    this.props.updateTodoName(id, this.state.tN)
    // 让编辑文本框隐藏
    this.setState({
      isEdit: false,
    })
  }

  render() {
    const { todo } = this.props
    const { isEdit, tN } = this.state
    return (
      <li>
        <label>
          {isEdit ? (
            <input
              type="text"
              value={tN}
              onChange={(e) => {
                this.setState({
                  tN: e.target.value.trim(),
                })
              }}
              onKeyDown={this.updateTodo(todo.id)}
            />
          ) : (
            <div>
              <input
                type="checkbox"
                checked={todo.isDone}
                onChange={this.handle(todo.id)}
              />
              <span className={todo.isDone ? 'active' : ''}>
                {todo.todoName}
              </span>
            </div>
          )}
        </label>
        <button className="btn btn-danger" onClick={this.delhandle(todo.id)}>
          删除
        </button>
        <button className="btn btn-edit" onClick={this.editHandle}>
          {isEdit ? '取消' : '编辑'}
        </button>
      </li>
    )
  }
}
